/*
 * @Author: liuying 247220246@qq.com
 * @Date: 2025-04-15 10:53:11
 * @LastEditors: liuying 247220246@qq.com
 * @LastEditTime: 2025-04-28 14:43:49
 * @FilePath: \my-book-react\src\pages\ranking\components\header\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar, Tabs } from 'antd-mobile';

import { rankingActions } from '@/pages/ranking/store';
import { TABS } from '@/pages/ranking/constants';
import { useAppSelector, useAppDispatch } from '@/stores';
const RanKingHeader: React.FC = React.memo(() => {
  const dispatch = useAppDispatch();
  const navigate = useNavigate();
  const seletedTabKey = useAppSelector<string>((state) => state.ranking.activeTabKey);

  const onTab = (key: string) => {
    console.log(key);

    // return false;
    dispatch(rankingActions.setTabKey(key));
  };
  const onBack = () => {
    navigate(-1);
  };
  return (
    <NavBar onBack={onBack}>
      <Tabs activeKey={seletedTabKey} onChange={onTab}>
        {TABS.map((item) => (
          <Tabs.Tab title={item.name} key={item.key} />
        ))}
      </Tabs>
    </NavBar>
  );
});
export default RanKingHeader;
